01 |
您所在的位置：网站首页 › react native 原理 › 01 |
01
|
前言
我们前期在探索iOS动画及渲染相关原理 的时候,先后了解了:
计算机图形渲染原理 ；
移动终端屏幕成像与卡顿原理；
iOS的各个渲染框架以及iOS图层渲染原理 ；
我们作为一个程序员,在提升技术能力水平的时候,有几种学习方法,比如,链式学习法、环式学习法、比较学习法等。
很明显,我们在探索iOS动画及渲染相关原理 的时候用的就是链式学习法。
紧接着,为了拓宽自己的知识面,对相同课题的做一个相对系统的认识,我们将采用环式学习法,去探索相关的几个课题:
iOS-OffScreenRendering离屏渲染原理
iOS因CPU、GPU资源消耗导致卡顿的原因和解决方案
以上皆是以iOS Native开发的角度去关注的,换一个维度去考虑的话,我们当然少不了应当去关注WebApp、跨平台开发的技术方案，你猜的没错,我在这里用的是比较学习法，相关的课题:
Web和类RN大前端的渲染原理
Flutter页面渲染原理
三种不同技术方案下的页面渲染的性能比较
当然了,在我们今天这个时代的技术生态,阿里、腾讯、百度等大厂还推出了小程序,所以我们也要关注一下
小程序框架的渲染原理
在前面的几个课题中,我们是以iOSNative的角度出发去扩展开来学习了解其它非纯Native 渠道端的渲染原理的。我们知道,在一个项目团队里面，我们出技术方案的时候是要考虑到其它渠道终端设备的。所以我们也不能落下其它Native端
Android 页面渲染原理
HarmonyOS 页面渲染原理(待输出)
最后,当我们了解了以上提及到的小课题之后,我们还要做一个总结性收尾:
项目方案的大前端技术搭配选型(待输出)
大前端工程师技术栈积累的思考(待输出)
概述
本文所起的作用就像是一本书的导读,主要是为不同的分述文章做一个概要介绍,并不直接深入细枝末节去展开问题进行讨论。读者朋友们可以根据自己的兴趣或需要进入不同的章节进一步了解相关内容。 本系列文章既对渲染原理有一个相对系统的探讨,也引入了环式学习法、比较学习法、链式学习法等几种帮助我们在程序生涯中提升技能的优良学习方法。 本系列文章涉及的范围: 计算机原理知识 计算机图形渲染原理 ； 移动终端屏幕成像与卡顿原理； iOS相关专题 iOS的各个渲染框架以及iOS图层渲染原理 ； iOS动画渲染原理 iOS OffScreen Rendering 离屏渲染原理 iOS因CPU、GPU资源消耗导致卡顿的原因和解决方案 webApp相关专题 Web和类RN大前端的渲染原理 跨平台开发相关专题 Flutter的渲染原理 其它Natice设备端相关专题 Android 页面渲染原理 HarmonyOS 页面渲染原理 扩展程序生态的小程序相关专题 小程序框架渲染原理 一、计算机渲染原理知识该章节从相对底层的角度，对计算图形渲染原理进行简要介绍，以作为后续对图形学相关的开发(如OpenGL、视频播放器、AR、VR等)指导进行知识储备。
该章节目前只通过一篇文章来介绍,文章通篇内容包括四个小章节,如附图:
在计算机渲染原理知识的基础上,我们扩展开来讨论移动开发iOS端的几个相关的小课题: 01-移动终端屏幕成像与卡顿原理大前端的开发框架主要分为两类: 第一类是基于 WebView 的，第二类是类似 React Native 的。 对于第一类 WebView 的大前端渲染，主要工作在 WebKit 中完成。 WebKit 的渲染层来自以前 macOS 的 Layer Rendering 架构，而 iOS 也是基于这一套架构。 所以，从本质上来看，WebKit 和 iOS 原生渲染差别不大。第二类的类 React Native 更简单，渲染直接走的是 iOS 原生的渲染。
那么，我们为什么会感觉 WebView 和类 React Native 比原生渲染得慢呢？ 想要了解更多可以进入我这篇文章查看详情:Web和类RN大前端的渲染原理 四、跨平台方案页面渲染专题本次讨论的移动跨平台方案以Flutter框架为例,篇幅如下:
Flutter是一个使用Dart语言开发的跨平台移动UI框架,通过自建绘制引擎，能高性能、高保真地进行Android和IOS开发。作为一个跨平台的应用框架，诞生之后，就被高度关注 它通过自绘 UI ，解决了之前 RN 和 weex 等类RN技术方案难以解决的多端一致性问题。 了解底层引擎的工作原理可以帮助我们更深入地结合具体的业务来对引擎进行定制和优化，更好的去创新和支撑业务。 若Flutter方案恰好是您关注的问题,可以通过我的这篇文章进行更详细了解:Flutter的渲染原理 五、Android、HarmonyOS页面渲染专题 Android页面渲染原理 HarmonyOS页面渲染原理 (待输出) 六、小程序页面渲染原理 小程序框架渲染原理 七、总结 终于来到本次专题学习的尾声了。首先为连续学习几个分述章节的我们一起鼓个掌吧😆！！！ 现在进入我们的总结阶段！！！ 首先,先来个回顾:通过前面的几个章节的介绍,我们在学习了计算机图形渲染原理的基础上大体上掌握了Native端页面的渲染原理(iOS、Android、HarmonyOS)、webApp页面渲染原理、HybridApp页面渲染原理(以Flutter为例子)、小程序页面渲染原理,更详细的介绍可以回顾本文前面的章节。 前面每个章节的概要,可以告诉我们该章节主要讨论什么专题,若刚好是您想要了解的专题,可以点击章节索引的链接,进入更深入的探索学习！希望能够解开您心中的疑云. 如若我的文章是您关注的问题然而却未解决您的疑惑,欢迎您向我留言,我将争取在我发现信息的第一时间为您提供帮助。 然后,我们接下来要通过结合它们各自不同场景的性能体现以及项目组研发成本等情况做一个项目组技术方案选型案例： 项目方案的大前端技术搭配选型(待输出) 最后,我们作为程序员,要对自己的职业生涯发展进行相对可靠的规划。所以我们也要对自己的技术栈积累进行一定可靠的选择。毕竟路选对了就少走弯路了:大前端工程师技术栈积累的思考(待输出) 相关阅读(共计14篇文章) 01-计算机原理|计算机图形渲染原理这篇文章 02-计算机原理|移动终端屏幕成像与卡顿 iOS相关专题 01-iOS底层原理|iOS的各个渲染框架以及iOS图层渲染原理 02-iOS底层原理|iOS动画渲染原理 03-iOS底层原理|iOS OffScreen Rendering 离屏渲染原理 04-iOS底层原理|因CPU、GPU资源消耗导致卡顿的原因和解决方案 webApp相关专题 01-Web和类RN大前端的渲染原理 跨平台开发方案相关专题 01-Flutter页面渲染原理 阶段性总结:Native、WebApp、跨平台开发三种方案性能比较 01-Native、WebApp、跨平台开发三种方案性能比较 Android、HarmonyOS页面渲染专题 01-Android页面渲染原理 02-HarmonyOS页面渲染原理 (待输出) 小程序页面渲染专题 01-小程序框架渲染原理 |
【本文地址】
今日新闻 |
推荐新闻 |